<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="user-avatar">
				<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
			</view>
			<text class="username">{{ userInfo.nickName }}</text>
		</view>

		<!-- 功能入口区域 -->
		<view class="functions-section">
			<view class="function-item" @click="goToMyOrders">
				<view class="function-item-left">
					<view class="function-icon">
						<uni-icons type="shop" size="20"></uni-icons>
					</view>
					<text class="function-text">我的订单</text>
				</view>
				<image class="arrow-right" src="/static/image/arrow_right.png" mode="aspectFit"></image>
			</view>
			<!-- 只有管理员才能看到订单核销入口 -->
			<view class="function-item" @click="goToVerificationList" v-if="!userInfo.isAdmin">
				<view class="function-item-left">
					<view class="function-icon">
						<uni-icons type="scan" size="20"></uni-icons>
					</view>
					<text class="function-text">订单核销</text>
				</view>
				<image class="arrow-right" src="/static/image/arrow_right.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
} from 'vue';

const userInfo = ref({
	avatarUrl: '/static/image/logo.png',
	nickName: '暂无'
});

// 页面初始化时获取用户配置信息
const initUserInfo = () => {
	try {
		const userConfig = uni.getStorageSync('userConfig');
		console.log('用户配置信息:', userConfig);
		if (userConfig) {
			userInfo.value = {
				...userInfo.value,
				...userConfig
			};
		}
	} catch (error) {
		console.error('获取用户配置失败:', error);
	}
};

// 初始化用户信息
initUserInfo();

const goToMyOrders = () => {
	console.log('跳转到我的订单页面');
	// 这里可以使用uni.navigateTo跳转到订单页面
	uni.navigateTo({
		url: '/pages/mine/myOrder'
	})
};

// 跳转到核销列表页面
const goToVerificationList = () => {
	console.log('跳转到订单核销页面');
	uni.navigateTo({
		url: '/pages/list/verificationList'
	});
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

// 用户信息区域
.user-info-section {
	background-color: #165dff;
	padding: 40px 20px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.user-avatar {
		margin-bottom: 20px;

		.avatar {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			border: 2px solid rgba(255, 255, 255, 0.3);
		}
	}

	.username {
		color: #fff;
		font-size: 20px;
		font-weight: bold;
	}
}

// 功能入口区域
.functions-section {
	background-color: #fff;
	margin-top: 10px;

	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;

		.function-item-left {
			display: flex;
			align-items: center;
		}

		.function-icon {
			margin-right: 12rpx;
		}

		.function-text {
			flex: 1;
			font-size: 16px;
			color: #333;
		}

		.arrow-right {
			width: 15px;
			height: 15px;
		}
	}
}
</style>